<template>
	<view class="container">
		<list-cell v-for="(item,key) in accountList" :key="key" :title="item.title" :tips="item.tip" tipsColor="#797979"
		 @eventClick="goPage(item,key)"></list-cell>
		<list-cell v-if="hasLogin" title="Logout" titColor="#EB658D" @eventClick="Logout()"></list-cell>
		<!-- 修改名称 -->
		<uni-popup ref="changeNamePopup" :type="type" :mask-click="false" @change="changePopup">
			<view class="uni-tip">
				<view class="close-btn" @click="closeModel('changeName')">
					<image src="/static/images/close.png"></image>
				</view>
				<text class="uni-tip-title">Full Name</text>
				<view class="uni-tip-content">
					<view class="input-item">
						<input type="text" placeholder="Full Name" v-model="name" />
					</view>
					<text>First Last</text>
				</view>
				<view class="uni-tip-group-button">
					<button class="btn" @click="editUser('changeName')">Save</button>
				</view>
			</view>
		</uni-popup>
		<!-- 修改密码 -->
		<uni-popup ref="changePwdPopup" :type="type" :mask-click="false" @change="changePopup">
			<view class="uni-tip">
				<view class="close-btn" @click="closeModel('changePwd')">
					<image src="/static/images/close.png"></image>
				</view>
				<text class="uni-tip-title">Change Password</text>
				<view class="uni-tip-content">
					<view class="input-item">
						<input type="text" password placeholder="Current Password" v-model="currentPwd" />
					</view>
					<view class="input-item">
						<input type="text" password placeholder="Change Password" v-model="changePwd" />
					</view>
					<view class="input-item">
						<input type="text" password placeholder="Confirm Password" v-model="confirmPwd" />
					</view>
				</view>
				<view class="uni-tip-group-button">
					<button class="btn" @click="editUser('changePwd')">Save</button>
				</view>
			</view>
		</uni-popup>
		<!-- 修改手机号 -->
		<uni-popup ref="changeMobilePopup" :type="type" :mask-click="false" @change="changePopup">
			<view class="uni-tip">
				<view class="close-btn" @click="closeModel('changeMobile')">
					<image src="/static/images/close.png"></image>
				</view>
				<text class="uni-tip-title">Change Mobile</text>
				<view class="uni-tip-content">
					<view class="input-item">
						<input type="text" placeholder="Mobile" v-model="mobile" />
					</view>
				</view>
				<view class="uni-tip-group-button">
					<button class="btn" @click="editUser('changeMobile')">Save</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import listCell from '@/components/mix-list-cell';
	import {
		mapMutations
	} from 'vuex';
	
	export default {
		components: {
			listCell,
			uniPopup
		},
		data() {
			return {
				type: 'center',
				accountList: [],
				name: '',
				currentPwd: '',
				changePwd: '',
				confirmPwd: '',
				mobile: '',
				hasLogin: false
			}
		},
		onShow() {
			this.loadData();
			this.hasLogin = this.$db.get('userToken') || false;
		},
		methods: {
			...mapMutations(['logout']),
			async loadData() {
				let accountList = await this.$api.json('accountList');
				this.accountList = accountList
				
				let userInfo = this.$db.get('userInfo')
				if(userInfo) {
					this.accountList[0].tip = userInfo.user_login
				}
			},
			goPage(val, index) {
				switch (index) {
					case 0:
						this.name = ''
						this.$nextTick(() => {
							this.$refs.changeNamePopup.open();
						})
						break;
					case 1:
						this.$common.navigateTo('../order/order?state=0')
						break;
					case 2:
						this.currentPwd = ''
						this.changePwd = ''
						this.confirmPwd = ''
						this.$nextTick(() => {
							this.$refs.changePwdPopup.open();
						})
						break;
					case 3:
						this.mobile = ''
						this.$nextTick(() => {
							this.$refs.changeMobilePopup.open();
						})
						break;
					case 4:
						this.$common.navigateTo('../public/about')
						break;
					case 5:
						this.$common.navigateTo('../public/helpCenter')
						break;
					case 6:
						this.$common.navigateTo('../public/termCondition')
						break;
                    case 7:
                        this.$common.navigateTo('../address/address?source=1')
                        break;
				}
			},
			// 合法性校验
			checkInput(val) {
				let res = {};
				switch(val) {
					case 'changeName':
						if (!this.name) {
							res.status = false;
							res.msg = 'Please enter the Full Name';
						} else {
							res.status = true;
						}
						return res;
						break;
					case 'changePwd':
						if (!this.currentPwd) {
							res.status = false;
							res.msg = 'Please enter the Current Password';
						} else if (!this.changePwd) {
							res.status = false;
							res.msg = 'Please enter the Change Password';
						} else if (!this.confirmPwd) {
							res.status = false;
							res.msg = 'Please enter the Confirm Password';
						} else {
							res.status = true;
						}
						return res;
						break;
					case 'changeMobile':
						if (!this.mobile) {
							res.status = false;
							res.msg = 'Please enter the Mobile';
						} else {
							res.status = true;
						}
						break;
				}
				
				return res;
			},
			editUser(val) {
				if(!this.checkInput(val).status) {
					this.$common.errorToShow(this.checkInput(val).msg);
					return;
				}
				
				let data = {}
				let _this = this
				switch(val) {
					case 'changeName':
						data.key = 'user_login'
						data.value = _this.name
						break;
					case 'changePwd':
						data.key = 'new_password'
						data.value = _this.changePwd
						data.repeat_password = _this.confirmPwd
						data.old_password = _this.currentPwd
						break;
					case 'changeMobile':
						data.key = 'mobile'
						data.value = _this.mobile
						break;
				}
				
				this.$api.changeName(data, res => {
					if(res.code === 1) {
						_this.$common.successToShow(res.msg, ress => {
							if(val == 'changeName') {
								const userInfo = _this.$db.get('userInfo')
								userInfo.user_login = _this.name
								_this.$db.set('userInfo', userInfo)
							} else if(val === 'changePwd') {
								_this.handleLogOut();
							}
							_this.$refs[val + 'Popup'].close();
							_this.loadData();
						})
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})
			},
			changePopup() {

			},
			closeModel(val) {
				this.$nextTick(() => {
					this.$refs[val + 'Popup'].close();
				})
			},
			Logout() {
				let _this = this;
				uni.showModal({
					title: 'Logout',
					content: 'Are you sure you want to log out?',
					cancelText: 'cancel',
					confirmText: 'confirm',
					success: (e) => {
						if (e.confirm) {
							_this.handleLogOut();
						}
					}
				});
			},
			handleLogOut() {
				let _this = this
				_this.$api.logout(res => {
					_this.$db.del('userToken');
					_this.logout();
					uni.reLaunch({
					  url: '/pages/public/login'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {

		/* 提示窗口 */
		.uni-tip {
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			padding: 15px;
			width: 300px;
			background-color: #fff;
			border-radius: 10px;

			.close-btn {
				position: absolute;
				right: 4%;
				top: 5%;

				image {
					width: 1rem;
					height: 1rem;
				}
			}
		}

		.uni-tip-title {
			margin-bottom: 10px;
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #333;
		}

		.uni-tip-content {
			/* padding: 15px;
 */
			font-size: 14px;
			color: #666;

			.input-item {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				border: 4rpx solid rgba(25, 25, 25, 0.6);
				box-sizing: border-box;
				padding: 10rpx 32rpx;
			}

			text {
				font-family: Roboto;
				font-size: $font-sm;
				letter-spacing: 0.8rpx;
				color: #4666D5;
				opacity: 0.6;
			}
		}

		.uni-tip-group-button {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			margin-top: 20px;

			.btn {
				width: 100%;
			}
		}

		.uni-tip-button {
			flex: 1;
			text-align: center;
			font-size: 14px;
			color: #3b4144;
		}
	}
</style>
